{% extends 'manage_layout.html' %}

{% block lk %}
    <title>用户管理</title>
{% endblock %}

{% block content %}
    <div class="input-group">
        </div><!-- /input-group -->
    <div class="bs-example" data-example-id="striped-table">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>电话</th>
          <th>住址</th>
          <th>邮箱</th>
          <th>g性别</th>
          <th>权限</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody style="height: 100%">
      {% for user_item in user_data %}
        <tr>
          <th scope="row">{{user_item.id}}</th>
          <td>{{ user_item.name }}</td>
          <td>{{ user_item.phone_number }}</td>
          <td>{{ user_item.user_address }}</td>
          <td>{{ user_item.email }}</td>
          <td>{{ user_item.get_gender_display }}</td>
          <td>{{ user_item.get_level_display }}</td>
          <td>
              <span>
                  <a href="http://127.0.0.1:8000/edit/account/{{ user_item.id }}"><input uid="{{ user_item.id }}" class="btn btn-danger btn-xs btn-default"  type="button" value="编辑" style="background-color: #4cae4c;border-color: white;"></a>
                    <input uid="{{ user_item.id }}" class="btn btn-danger btn-xs btn-delete"  type="button" value="删除">
            </span>
          </td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
    </div>
    <ul class="pagination">
        {{ page_string }}
     </ul>
 </div>

{% endblock %}

{% block js %}
    <script type="text/javascript">



        $('.btn-delete').click(function (){

           var uid = $(this).attr('uid');
            $.ajax({
                url: "/delete/account/",
                type: 'GET',
                data: {
                    uid: uid,
                },
                dataType: 'JSON',
                    success: function (res){
                        if(res.status){
                            location.reload();
                        }
                    }

            })

        })

    </script>

{% endblock %}